<template>
    <!-- 视频监控-智能监控-报警记录 -->
    <div id="rotary">
        <div class="search">
            <div class="left">
                <Tabs v-model="tabActiveName"  @on-click="setTabClick">
                    <TabPane :label="`待处理（${isCount>99?'99+':isCount}）`" name="0"></TabPane>
                    <TabPane :label="`已处理（${count>99?'99+':count}）`" name="1"></TabPane>
                </Tabs>
            </div>
            <div class="right">
                <DatePicker type="daterange" :options="options" :clearable="true" v-model="dateArr" v-if="inputShow" format="yyyy-MM-dd HH:mm:ss" placement="top" transfer  placeholder="请选择日期" style="width: 300px;" @on-change="getDateArr" @on-clear='clearDateFn'></DatePicker>
                <DatePicker type="daterange" format="yyyy-MM-dd" placement="top"  placeholder="请选择日期" v-if="inputShow" style="opacity:0;position: absolute;top:-9999px;width:1px;"></DatePicker>
                <el-button type="primary" v-show="isshowbatchBtn" :disabled="list.length == 0 || !btnList.includes('fvs/warnRecord/deal')" plain size="small" @click="clickbatch" style="margin-left:20px">批量处理</el-button>
                <el-button type="primary" v-show="isshowbatchBtn" :disabled="list.length == 0 || !btnList.includes('fvs/warnRecord/delete')" plain size="small" @click="clickRemove" style="margin-left:20px">批量删除</el-button>
                <el-button size="small" type="info" plain @click="clickBtn(0)" v-show="showSubmitBtn">取消</el-button>
                <el-button size="small" type="primary" plain @click="clickBtn(1)" v-show="showSubmitBtn">确定({{this.warnArray.length}})</el-button>
            </div>
        </div>
        <div class="overflowBox">
            <div class="box_left" v-preventReClick="1500" @click="prevFn"><i class="el-icon-caret-left"></i></div>
            <div class="box_right" v-preventReClick="1500" @click="nextFn"><i class="el-icon-caret-right"></i></div>
            <div class="boxList">
                <div class="box" :style="{'left' : -typeIndex * 172 + 'px' }">
                    <div v-for="(item , index) in arr" :key="index" :class="['item' , fimRuleType == item.algCheckType  ? 'itemActive' : '']" @click="warnActiveFn(item.algCheckType )">
                        <div class="top">
                            <div class="left">
                                <img src="../../assets/images/fvs/ana/fvs_yj.png" v-if="item.algCheckType == -1" />
                                <img src="../../assets/images/fvs/ana/fvs_mz.png" v-else-if="item.algCheckType == 10" />
                                <img src="../../assets/images/fvs/ana/fvs_yf.png" v-else-if="item.algCheckType == 20" />
                                <img src="../../assets/images/fvs/ana/fvs_rk.png" v-else-if="item.algCheckType == 30" />
                                <img src="../../assets/images/fvs/ana/fvs_jj.png" v-else-if="item.algCheckType == 40" />
                                <img src="../../assets/images/fvs/ana/fvs_sd.png" v-else-if="item.algCheckType == 50" />
                                <img src="../../assets/images/fvs/ana/fvs_gr.png" v-else-if="item.algCheckType == 60" />
                                <img src="../../assets/images/fvs/ana/fvs_ph.png" v-else-if="item.algCheckType == 70" />
                                <img src="../../assets/images/fvs/ana/fvs_tr.png" v-else-if="item.algCheckType == 80" />
                                <img src="../../assets/images/fvs/ana/fvs_hy.png" v-else-if="item.algCheckType == 90" />
                                <img src="../../assets/images/fvs/ana/fvs_cz.png" v-else-if="item.algCheckType == 100" />
                                <img src="../../assets/images/fvs/ana/fvs_cx.png" v-else-if="item.algCheckType == 110" />
                                <img src="../../assets/images/fvs/ana/fvs_cy.png" v-else-if="item.algCheckType == 120" />
                                <img src="../../assets/images/fvs/ana/fvs_ddh.png" v-else-if="item.algCheckType == 130" />
                                <img src="../../assets/images/fvs/ana/fvs_yw.png" v-else-if="item.algCheckType == 140" />
                                <img src="../../assets/images/fvs/ana/fvs_qyrq.png" v-else-if="item.algCheckType == 150" />
                                <img src="../../assets/images/fvs/ana/fvs_ddcjz.png" v-else-if="item.algCheckType == 160" />
                                <img src="../../assets/images/fvs/ana/fvs_clwt.png" v-else-if="item.algCheckType == 170" />
                                <img src="../../assets/images/fvs/ana/fvs_sgjc.png" v-else-if="item.algCheckType == 180" />
                                <img src="../../assets/images/fvs/ana/fvs_tstdds.png" v-else-if="item.algCheckType == 190" />
                                <img src="../../assets/images/fvs/ana/fvs_wpys.png" v-else-if="item.algCheckType == 200" />
                                <img src="../../assets/images/fvs/ana/fvs_kzjc.png" v-else-if="item.algCheckType == 210" />
                                <img src="../../assets/images/fvs/ana/fvs_qyrstj.png" v-else-if="item.algCheckType == 220" />
                                <img src="../../assets/images/fvs/ana/fvs_pxrstj.png" v-else-if="item.algCheckType == 230" />
                                <img src="../../assets/images/fvs/ana/fvs_pgjc.png" v-else-if="item.algCheckType == 240" />
                                <img src="../../assets/images/fvs/ana/fvs_rydl.png" v-else-if="item.algCheckType == 250" />
                                <img src="../../assets/images/fvs/ana/fvs_ryjj.png" v-else-if="item.algCheckType == 260" />
                                <img src="../../assets/images/fvs/ana/fvs_jlyd.png" v-else-if="item.algCheckType == 270" />
                                <img src="../../assets/images/fvs/ana/fvs_wcgf.png" v-else-if="item.algCheckType == 280" />
                                <img src="../../assets/images/fvs/ana/fvs_yj.png" v-else />
                            </div>
                            <div class="right">
                                <div class="p" v-if="item.count > 99">
                                    <div class="numBox">
                                        <span class="num">99</span><i>+</i>
                                    </div>
                                    <span>次</span>
                                </div>
                                <div class="p" v-else><span class="num">{{item.count}}</span> <span>次</span></div>
                            </div>
                        </div>
                        <div class="bottom">
                            <div class="p">{{item.name}}</div>
                        </div>

                    </div>
                </div>
            </div>
            </div>
        <div class="content">
            <div class="checkBox">
                <ul  class="check" v-if="list.length>0">
                    <li v-for="(item ,index ) in list" :key="index"  @click="handle( index, list,item.resultId)"  v-preventReClick="1500"
                        :style="{background:item.resultImgUrlList.length > 0 ? 'rgba(255,255,255,1)' : 'none'}">
                        <el-image style="width:100%;height: 100%" :src="item.resultImgUrlList[0]"
                            v-if="item.resultImgUrlList.length > 0 && item.resultImgUrlList[0] != 'http://111.120.11.161:4311/'">
                        </el-image>
                        <el-image style="width:100%;height: 100%;border:2px solid #eee;box-sizing:border-box;"
                            :src="require('../../assets/images/fvs/ana/fvs_none.png')" fit="contain" v-else>
                        </el-image>
                        <div class="check_tag">
                            <div class="item">
                                <span class="per">{{item.algCheckTypeName}}</span>
                                <p>
                                    <em v-if="item.handleStatus == 0" style="background-color:#FFA64D"></em>
                                    <span v-if="item.handleStatus == 0" style="color:#FFA64D">未处理</span>
                                    <em v-if="item.handleStatus == 1" style="background-color:#21EDF3"></em>
                                    <span v-if="item.handleStatus == 1" style="color:#21EDF3">已处理</span>
                                </p>
                            </div>
                            <div class="item" style="color: #fff;">
                                <p>
                                    <span >来源:</span>
                                    <span >{{item.deviceName}}</span>
                                </p>
                                <span>{{item.time}}</span>
                            </div>
                        </div>
                        <div class="li_active" v-if="item.piliType">
                            <img  src="./../../assets/images/fvs/ana/check1.png" />
                        </div>
                    </li>
                </ul>
                <div class="empty" v-else>
                    <div class="no_lsit" style="width:96%;margin:auto;text-align:center;">
                        <img src="./../../assets/images/common/rotary_nodata.png" style="height: 506px;" />
                    </div>
                </div>
                <div class="clearfix"   style="width:96%; border-top: 1px solid #eee;">
                    <div class="float-right">
                        <Page v-if="totalCount" style="text-align: center;margin: 0.2rem 0;" :current.sync="current" :total="totalCount" :page-size="pageSize" show-elevator show-total @on-change="pageChange"></Page>
                    </div>
                </div>
            </div>
        </div>

        <Modal v-model="handleModal" width="800px" :mask-closable="false" :title="isAdd ? '报警信息处理' : '报警信息详情'" class-name="msgModal">
            <div class="msgBox">
                <div class="info">
                    <div class="title">
                        <h2>
                            <span class="bc"></span>
                            <span>设备信息</span>
                        </h2>
                    </div>
                    <div class="infoBox">
                        <div class="left">
                            <div class="list">
                                <div class="item">
                                    <span class="span">设备名称:</span>
                                    <span class="span">{{deviceName}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="info" style="margin-top:20px;">
                    <div class="title">
                        <h2>
                            <span class="bc"></span>
                            <span>报警规则</span>
                        </h2>
                    </div>
                    <div class="infoBox">
                        <div class="left">
                            <div class="list">
                                <div class="item">
                                    <span class="span">报警类型:</span>
                                    <span class="span">{{algCheckTypeName}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="info" style="margin-top:20px;">
                    <div class="title">
                        <h2>
                            <span class="bc"></span>
                            <span>报警信息</span>
                        </h2>
                    </div>
                    <div class="infoBox">
                        <div class="left" style="width:100%">
                            <div class="list">
                                <div class="item">
                                    <span class="span">报警时间:</span>
                                    <span class="span">{{time}}</span>
                                </div>
                            </div>
                            <div class="list">
                                <div class="item" v-if="personNameList.length>0">
                                    <span class="span">报警详情:</span>
                                    <span class="span">
                                        <span v-for="(item,index) in personNameList" :key="index" style="margin-right:5px">{{item}}</span>
                                    </span>
                                </div>
                                <div class="item" v-if="personNameList.length == 0">
                                    <span class="span">报警详情:</span>
                                    <span class="span">暂无</span>
                                </div>
                            </div>
                            <div class="list" style="width:100%">
                                <div class="item" style="width:100%;align-items:flex-start">
                                    <span class="span">抓拍照片:</span>
                                    <div class="span"  v-if="imgList.length>0 && imgList[0] != 'http://111.120.11.161:4311/'" style="flex:1;">
                                         <el-carousel   loop  arrow="always" style="width:100%;margin:auto;" height='360px'>
                                            <el-carousel-item  v-for="(item, index) in imgList" :key="index" >
                                                <img :src="item" alt=""  height="360px" width="100%" @click.stop="showImgFn(item)" />
                                            </el-carousel-item>
                                        </el-carousel>
                                    </div>
                                    <div class="fvs_img" v-else>
                                        暂无抓拍照片
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="info" style="margin-top:20px;">
                    <div class="title">
                        <h2>
                            <span class="bc"></span>
                            <span>报警处理</span>
                        </h2>
                    </div>
                    <div class="infoBox">
                        <div class="left" style="width:100%;">
                            <div class="list" v-if="!isAdd">
                                <div class="item">
                                    <span class="span">处理人:</span>
                                    <span class="span">{{handleUser}}</span>
                                </div>
                            </div>
                            <div class="list" v-if="!isAdd">
                                <div class="item">
                                    <span class="span">处理时间:</span>
                                    <span class="span">{{handleTime}}</span>
                                </div>
                            </div>
                            <div class="list">
                                <div class="item" style="width:100%;">
                                    <i class="tip" v-if="isAdd">*</i>
                                    <span class="span" >报警原因:</span>
                                    <span class="span" style="width:500px;white-space:normal;word-wrap: break-word;" v-if="!isAdd">{{handleRemark}}</span>
                                </div>
                            </div>
                            <div class="list inputMsg" v-if="isAdd">
                                <div class="item" style="width:100%;">
                                    <el-input  v-model="handleRemark" type="textarea" placeholder="请输入内容" maxlength="100" show-word-limit style="width:100%;margin:0 auto;font-size:14px"></el-input>
                                </div>
                            </div>
                            <div class="list" >
                                <div class="item" style="width:100%;">
                                    <i class="tip" v-if="isAdd">*</i>
                                    <span class="span" >处理结果:</span>
                                    <span class="span" style="width:500px;;white-space:normal;word-wrap: break-word;" v-if="!isAdd">{{handleResult}}</span>
                                </div>
                            </div>
                             <div class="list inputMsg" v-if="isAdd">
                                <div class="item" style="width:100%;">
                                    <el-input v-model="handleResult" type="textarea" placeholder="请输入内容" maxlength="100" show-word-limit style="width: 100%;margin: 0 auto;font-size:14px"></el-input>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <el-button @click="cancel(0)" style="padding:7px 25px;border-radius: 15px;" type="info" size="mini" plain v-if="isAdd">取消</el-button>
                <el-button @click="ok" type="primary"  style="padding:7px 25px;border-radius: 15px;" size="mini" v-if="isAdd"  v-preventReClick="1500"><span style="color:#fff;">确定</span></el-button>
            </div>
        </Modal>
        <Modal v-model="Modal" title="报警信息处理" width="360px;" :mask-closable="false" class-name="msgModal">
            <p style="width:100%;text-align:center;font-size:16px;color:#1891ff;margin:20px auto;">
                处理消息一旦确认，就无法更改！
            </p>
            <div style="width:100%;text-align:center;font-size:16px;color:#1891ff;margin:20px auto;">
                您是否确认处理结果？
            </div>
            <div slot="footer">
                <el-button @click="cancel(1)" style="padding:7px 25px;border-radius: 15px; background:rgba(46, 104, 253, 0.16);border:1px solid rgba(46, 104, 253, 0.16);" type="info" size="mini"><span style="color:#1891ff;">取消</span> </el-button>
                <el-button @click="submit" type="primary"  style="padding:7px 25px;border-radius: 15px;background:#1891ff;border:1px solid #1891ff;" size="mini"  v-preventReClick="1500"><span style="color:#fff;">确定</span></el-button>
            </div>
        </Modal>
        <div class="imgModal" v-if="imgModal" @click="cancel(2)">
            <span class="close" @click="cancel(2)">
                <Icon type="ios-close-circle" style="color:#fff;font-size:24px;"/>
            </span>
            <img :src="imgUrl" alt="">
        </div>
        <!-- 批量处理弹框 -->
        <Modal v-model="isshowpilModel" title="报警信息处理" width="700px" :mask-closable="false" :footer-hide="false">
            <div id="pilcontent_box">
                <div class="top">
                    <span><i>*</i>报警原因</span>
                    <el-input type="textarea" :rows="2" placeholder="请输入报警原因" v-model="alarmReason"></el-input>
                </div>
                 <div class="botm">
                    <span><i>*</i>处理结果</span>
                    <el-input type="textarea" :rows="2" placeholder="请输入处理结果" v-model="reHandling"></el-input>
                </div>
            </div>
             <div slot="footer">
                <el-button @click="cancel(3)" size="small" type="info" plain>取消</el-button>
                <el-button @click="batchSubmit" type="primary" size="small" v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>
        <Modal v-model="deleteModal" title="删除" width="360px;" :mask-closable="false">
            <div style="margin:10px">确定要删除这几条数据吗？</div>
            <div slot="footer">
                <el-button @click="cancel(4)" type="info" size="small" plain>取消</el-button>
                <el-button @click="detele" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>
    </div>
</template>
<script>
import {formatTen , formatDate,initYMD} from '@/sever/utils.js'
import {
    getFimResultList,
    getFimResultDetail,
    getFimResultHandle,
    getFimResultStatic,
    getFimResultbatchHandle,
    getFimResultbatchDel
} from "@/api/api.js";
export default {
    data() {
        return {
            tabActiveName:"0",
            options: {
                disabledDate(date) {
                    return date > Date.now();
                }
            },
            current: 1,
            pageSize: 12,
            pageNum: 1,
            totalCount: 0,
            list: [],
            dateArr:[],
            flag: true,
            state: 0,
            handleModal: false,
            inputShow: false,
            isAdd: false,
            handleRemark: "",
            handleResult: "",
            deviceName: "",
            personNameList: "",
            time: "",
            algCheckType: "",
            algCheckTypeName: "",
            handleTime: "",
            handleUser: "",
            warnId: "",
            Modal: false,
            count: 0,
            isCount: 0,
            porjectType: "",
            imgList: [],
            ruleTypeList: [
                {
                    id: 10,
                    name: "安全帽检测"
                },
                {
                    id: 20,
                    name: "反光衣检测"
                },
                {
                    id: 30,
                    name: "人员越界"
                },
                {
                    id: 40,
                    name: "人员聚集"
                },
                {
                    id: 50,
                    name: "人员摔倒"
                },
                {
                    id: 60,
                    name: "人员离岗"
                },
                {
                    id: 70,
                    name: "人员徘徊"
                },
                {
                    id: 80,
                    name: "裸土检测"
                },
                {
                    id: 90,
                    name: "火焰检测"
                },
                {
                    id: 100,
                    name: "车辆识别"
                },
                {
                    id: 110,
                    name: "人员疲劳驾驶"
                },
                {
                    id: 120,
                    name: "人员抽烟"
                },
                {
                    id: 130,
                    name: "人员玩手机"
                },

            ],
            fimRuleType: -1,
            typeIndex : 0,
            arr: [],
            imgUrl:"",
            imgModal:false,

            showLiModel:false,//批量是否选中蒙版
            isshowbatchBtn:true,//批量按钮是否显示
            showSubmitBtn:false,//二次确认按钮
            flags:false,
            warnArray:[],//批量id集合
            isshowpilModel:false,//批量弹窗
            alarmReason:'',//报警原因
            reHandling:'',//处理结果
            handleFlag:false,
            clickFlag:false,
            deleteModal:false,
        };
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        }
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.porjectType = val.deptId;
                this.fimRuleType = -1;
                this.pageNum = 1;
                this.current = 1;
                this.dateArr = [];
                this.warnArray = [];
                this.isshowbatchBtn = true;
                this.showSubmitBtn = false;
                this.initDate();
            }
        }
    },
    beforeDestroy() {
        if(localStorage.getItem('logTime')){
            localStorage.removeItem('logTime')
        }
    },
    mounted() {
        this.porjectType = this.$store.state.porjectObject.deptId;
        this.btnList = JSON.parse(localStorage.getItem("arr"));
        if(localStorage.getItem('logTime')){
            this.dateArr = [initYMD(JSON.parse(localStorage.getItem('logTime')))+' '+'00:00:00',initYMD(JSON.parse(localStorage.getItem('logTime')))+' '+'23:59:59'];
            this.getAllList();
            this.initDataFn();
            this.getFimResultStaticFn();
        }else{
            this.initDate();
        }
        setTimeout(()=>{
            this.inputShow = true;
        },1)
    },
    methods: {
        //点击批量处理按钮
        clickbatch(){
            this.flags = true;  //用于判断是否点击了批量按钮
            this.showSubmitBtn = true;
            this.isshowbatchBtn = false;
            this.clickFlag = false;
            this.list.forEach((i)=>{
                i.piliType = false
            })
        },
        //点击批量删除按钮
        clickRemove(){
            this.flags = true;  //用于判断是否点击了批量按钮
            this.showSubmitBtn = true;
            this.isshowbatchBtn = false;
            this.clickFlag = true;
            this.list.forEach((i)=>{
                i.piliType = false
            })
        },
        //点击确定和取消按钮
        clickBtn(type){
            if(type == 0){
                 this.isshowbatchBtn = true //批量处理按钮
                 this.showSubmitBtn = false //确定取消按钮
                 this.flags = false;
                 this.list.forEach((i)=>{
                   i.piliType = false
               })
             this.warnArray = []
            }else{
                if(this.warnArray.length===0){
                    this.$Modal.warning({
                        title: "提示",
                        content: "请勾选批量信息"
                    });
                }else{
                    if(this.clickFlag) {
                        this.deleteModal = true;//批量删除弹窗
                    } else {
                        this.isshowpilModel = true //批量处理弹窗
                    }
                }
            }
        },
        detele(){
            if(this.warnArray.length == 0) {
                this.$Modal.warning({
                    title: "提示",
                    content: "请勾选要删除的信息"
                });
                return;
            }
            let params = {
                resultIdList:this.warnArray
            }
            getFimResultbatchDel(params).then(res=>{
                if(res.code  == 200) {
                    this.$Message.success("删除成功");
                    this.warnArray = [];
                    this.isshowbatchBtn = true;
                    this.showSubmitBtn = false;
                    this.deleteModal = false;
                    this.getAllList();
                    this.initDataFn();
                }
            }).catch(error=>{
                console.log(error)
            })
        },
        //批量提交
        batchSubmit(){
            if (this.alarmReason == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请填写报警原因"
                });
                return;
            }
            if (this.reHandling == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请填写处理结果"
                });
                return;
            }
            this.handleFlag = false;
            this.Modal = true

        },
        initDataFn(){
            this.getIsCountFn();
            this.getCountFn();
        },
        //获取待整改
        getIsCountFn() {
            let parmas = {
                deptId: this.porjectType,
                handleStatus: 0,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                startTime: formatDate(this.dateArr[0]),
                endTime: formatDate(this.dateArr[1])
            };
            getFimResultList(parmas)
                .then(res => {
                    if (res.code == 200) {
                        this.isCount = res.data.total;
                        if(this.state == 0 ){
                            this.totalCount = res.data.total;
                        }
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        //获取已整改
        getCountFn() {
            let parmas = {
                deptId: this.porjectType,
                handleStatus: 1,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                startTime: formatDate(this.dateArr[0]),
                endTime: formatDate(this.dateArr[1])

            };
            getFimResultList(parmas)
                .then(res => {
                    if (res.code == 200) {
                        this.count = res.data.total;
                        if(this.state == 1 ){
                            this.totalCount = res.data.total;
                        }
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        showImgFn(img){
            this.imgModal = true;
            this.imgUrl = img;
        },
        warnActiveFn(num){
            this.fimRuleType = num;
            this.pageNum = 1;
            this.current = 1;
            this.warnArray =[];
            if(this.tabActiveName==='0'){
               this.gethandle();
            }else if(this.tabActiveName==="1"){
                this.getYhandle();
            }
        },
        prevFn(){
            if(this.typeIndex != 0){
                this.typeIndex -=1;
            }
        },
        nextFn(){
            let arrLength = this.arr.length
            let boxWidth = document.getElementsByClassName("boxList")[0].clientWidth
            let showNum = parseInt(boxWidth / 172)

            if(this.typeIndex < arrLength - showNum){
                this.typeIndex +=1;
            }
        },
        setTabClick(name) {
            if(name==='0'){
               this.gethandle();
               this.getFimResultStaticFn();
            }else if(name==="1"){
                this.getYhandle();
                this.getFimResultStaticFn();
            }
        },
        getFimResultStaticFn(){
            this.arr = [];
            let parmas = {
                deptId: this.porjectType,
                handleStatus: this.state,
                startTime: formatDate(this.dateArr[0]),
                endTime: formatDate(this.dateArr[1])
            };
            getFimResultStatic(parmas).then(res=>{
                if(res.code == 200 ){
                    let all = {
                        algCheckType: -1,
                        count: 0,
                        name: '总报警次数',
                    }
                    res.data.list.forEach(v => {
                        all.count += v.count;
                    })
                    this.arr = [all , ...res.data.list];
                }else{
                    this.$Message.warning(res.msg);
                }
            })
            .catch(err=>{
                console.log(err)
            })
        },
        //获取列表
        getAllList() {
            this.totalCount = '';
            let parmas = {
                deptId: this.porjectType,
                handleStatus: this.state,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                algCheckType: this.fimRuleType == -1 ? "" : this.fimRuleType,
                startTime: formatDate(this.dateArr[0]),
                endTime: formatDate(this.dateArr[1])
            };
            getFimResultList(parmas)
                .then(res => {
                    if (res.code == 200) {
                        this.list = res.data.list;
                        // this.list.forEach(v=>{
                        //     if(v.ruleType==110){
                        //         v.ruleTypeName="疲劳驾驶"
                        //     }else if(v.ruleType==120){
                        //         v.ruleTypeName="抽烟"
                        //     }else if(v.ruleType==130){
                        //         v.ruleTypeName="玩手机"
                        //     }
                        //     if(v.ruleType==101){
                        //         v.resultImgUrlList =[require('../../assets/images/fvs/ana/rotary_err.png')]
                        //     }else{
                        //         if(v.resultImgUrlList.length==0){
                        //             v.resultImgUrlList =[require('../../assets/images/fvs/ana/fvs_none.png')]
                        //         }
                        //     }

                        // })
                        this.totalCount = res.data.total;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        getDateArr(i,v){
            this.dateArr = i;
            this.getFimResultStaticFn();
            this.getAllList();
            this.initDataFn();
        },
        clearDateFn(){
            this.initDate();
        },
        gethandle() {
            this.flag = true;
            this.list = [];
            this.state = 0;
            this.getAllList();
        },
        getYhandle() {
            this.flag = false;
            this.list = [];
            this.state = 1;
            this.getAllList();
        },
        pageChange(index) {
            this.pageNum = index;
            this.warnArray = []
            this.getAllList();
        },
        getHandleDetails(row) {
            this.warnId = row.resultId;
            this.getDetails(row.resultId);
        },
        handle(index, rows,id) {
            if(this.flags){
                let len =  this.warnArray.indexOf(id);
                if(len == -1) {
                   this.warnArray.push(id);
                } else {
                    this.warnArray.splice(len, 1);
                }
                this.list.forEach((i)=>{
                    if(i.resultId == id){
                        i.piliType = !i.piliType
                    }
                })
            } else {
               this.warnId = rows[index].resultId;
               this.getDetails(rows[index].resultId);
            }

        },
        getDetails(id) {
            let parmas = {
                resultId: id
            };
            getFimResultDetail(parmas)
                .then(res => {
                    if (res.code == 200) {
                        if (res.data.handleStatus == 1) {
                            this.handleRemark = res.data.handleRemark;
                            this.handleResult = res.data.handleResult;
                            this.isAdd = false;
                        } else if (res.data.handleStatus == 0) {
                            this.handleRemark = "";
                            this.handleResult = "";
                            this.isAdd = true;
                        }
                        this.handleModal = true;
                        this.deviceName = res.data.deviceName;
                        this.personNameList = res.data.personNameList;
                        this.time = res.data.time;
                        this.algCheckType = res.data.algCheckType;
                        this.algCheckTypeName = res.data.algCheckTypeName;
                        this.handleTime = res.data.handleTime;
                        this.handleUser = res.data.handleUser;
                        this.imgList = res.data.resultImgUrlList;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        ok() {
            if (this.handleRemark == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请填写报警原因"
                });
                return;
            }
            if (this.handleResult == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请填写处理结果"
                });
                return;
            }
            this.Modal = true;
            this.handleFlag = true;
        },
        submit() {
            if(this.handleFlag) {
                let parmas = {
                    resultId: this.warnId,
                    handleResult: this.handleResult,
                    handleRemark: this.handleRemark
                };
                getFimResultHandle(parmas)
                    .then(res => {
                        if (res.code == 200) {
                            this.$Message.success("处理成功");
                            this.pageNum = 1;
                            this.current = 1;
                            this.getFimResultStaticFn();
                            this.getAllList();
                            this.initDataFn();
                            this.handleModal = false;
                            this.Modal = false;
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            } else  {
                let warnIdList = [];
                this.warnArray.forEach(v=>{
                    warnIdList.push(v)
                })
                let parmas = {
                    resultIdList:warnIdList,
                    handleResult:this.reHandling,
                    handleRemark:this.alarmReason
                };
                getFimResultbatchHandle(parmas).then( res => {
                    if(res.code == 200){
                        this.$Message.success("处理成功");
                        this.isshowpilModel = false
                        this.warnArray = []
                        this.isshowbatchBtn = true
                        this.showSubmitBtn = false
                        this.reHandling = '';
                        this.alarmReason = '';
                        this.Modal = false;
                        this.getAllList();
                        this.initDataFn();
                        this.getFimResultStaticFn();
                    }
                })
            }
        },
        cancel(type) {
            if (type == 0) {
                this.handleModal = false;
            } else if (type == 1) {
                this.Modal = false;
            } else if (type == 2) {
                this.imgModal = false;
            } else if(type == 3) {
                this.reHandling = ''
                this.alarmReason = ''
                this.isshowpilModel = false
            } else if (type == 4) {
                this.deleteModal = false;
            }
        },
        initDate() {
            let newDate = new Date();
            let oldDate = new Date();
            oldDate  = new Date(oldDate.setDate(newDate.getDate() - 6));
            let y = newDate.getFullYear();
            let m = newDate.getMonth() + 1; //获取当前月份(0-11,0代表1月，所以要加1);
            let d = newDate.getDate(); //获取当前日（1-31）
            let h = newDate.getHours();
            let minut = newDate.getMinutes();
            let s = newDate.getSeconds();


            let yy = oldDate.getFullYear();
            let mm = oldDate.getMonth() + 1; //获取当前月份(0-11,0代表1月，所以要加1);
            let dd = oldDate.getDate(); //获取当前日（1-31）
            let hh = oldDate.getHours();
            let minut_M = oldDate.getMinutes();
            let ss = oldDate.getSeconds();
            m = m < 10 ? "0" + m : m ;
            d = d < 10 ? "0" + d : d ;
            mm = mm < 10 ? "0" + mm : mm ;
            dd = dd < 10 ? "0" + dd : dd ;
            let startDate = yy + "-" + mm + "-" + dd + ' ' + hh + ':' + minut_M + ':' + ss;
            let endDate = y + "-" + m + "-" + d  + ' ' + h + ':' + minut + ':' + s;
            this.dateArr = [startDate,endDate]
            this.getAllList();
            this.initDataFn();
            this.getFimResultStaticFn();
        },
    }
};
</script>

<style scoped lang="less">
@import "./../../assets/style/themeBase.less";
</style>


<style scoped lang="scss">
@import "./../../assets/style/fvs/msgModal.scss";
#rotary{
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background-color: #f5f5f5;
    .search {
        width: 100%;
        padding: 10px 20px;
        margin-bottom: 10px;
        box-sizing: border-box;
        background:#fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left{
            width: 50%;
            >>>.ivu-tabs-bar{
                width: 100%;
                margin: 0 auto;
                border: none;
            }
        }

        .list{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-right: 20px;
            margin-top: 20px;
            span{
                width: 90px;
            }
        }
    }
    .overflowBox{
        width: 100%;
        padding: 0 40px;
        margin-bottom: 10px;
        position: relative;
        box-sizing: border-box;
        .box_left,
        .box_right{
            position: absolute;
            width: 40px;
            height: 80px;
            line-height: 80px;
            text-align: center;
            background-color: #FCFDFF;
            border: 1px solid #EEEEEE;
            box-sizing: border-box;
            color: var(--themeColor);
            font-size: 24px;
            cursor: pointer;
            z-index: 3;
        }
        .box_left{
            left: 0;
        }
        .hiddeClass{
            cursor: not-allowed;
            color: #A8ABB4;
        }
        .box_right{
            right: 0;
        }
        .boxList{
            position: relative;
            width: 100%;
            height: 80px;
            padding: 0 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;
            box-sizing: border-box;
            overflow: hidden;
            .box{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                padding: 0 10px;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                transition: all 0.5s ease-in;
                .item{
                    width: 100%;
                    background: #FCFDFF;
                    border: 1px solid #EEEEEE;
                    padding: 8px 20px;
                    box-sizing: border-box;
                    margin-right: 10px;
                    cursor: pointer;
                    &:hover {
                        transform: scale( 1.05);
                        transition: all 1s;
                        box-shadow: 0 4px 8px rgba(46,104,253,.12);
                    }
                    &.machRuleType{
                        background-color: #eee;
                        color: #fff;
                    }
                    &.itemActive{
                          background-color: #eee;
                          color: #fff;
                      }
                    .top{
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        margin-bottom: 2px;
                        .left{
                            width: 40px;
                            height: 40px;
                            margin-right: 10px;
                            background-color: #F80415;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            flex-direction: column;
                            border-radius: 50%;
                            img{
                                display: block;
                                width: 25px;
                                height: 25px;
                            }
                        }
                        .right{
                            flex: 1;
                            .p{
                                font-weight: 500;
                                letter-spacing: 2px;
                                font-size: 12px;
                                font-family: Microsoft YaHei;
                                font-weight: 400;
                                color: #181818;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                .numBox{
                                    position: relative;
                                    margin-right: 10px;
                                    i{
                                        position: absolute;
                                        top: -5px;
                                        right: -10px;;
                                        font-style: normal;
                                    }
                                }

                                &:last-of-type{
                                    display: flex;
                                    justify-content: flex-start;
                                    align-items: center;
                                }
                                .num{
                                    font-size: 24px;
                                }
                            }
                        }
                    }
                    .bottom{
                        .p{
                            width: 120px;
                            font-weight: 500;
                            letter-spacing: 2px;
                            font-size: 12px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: #181818;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                    }
                }

            }
        }
    }
    .content {
        width: 100%;
        height: calc(100% - 153px);
        padding-top: 20px;
        box-sizing: border-box;
        background-color: #fff;
        .checkBox{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            box-sizing: border-box;
            .check{
                width: 96%;
                flex: 1;
                list-style: none;
                margin: 0 auto;
                overflow: hidden;
                margin-bottom: 10px;
                li{
                    width: 22%;
                    height: 32%;
                    position: relative;
                    margin-right: 4%;
                    margin-bottom: 0.7%;
                    float: left;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;
                    &:nth-of-type(4n){
                        margin-right: 0;
                    }
                    .check_tag{
                        width: 100%;
                        padding: 10px 30px;
                        position: absolute;
                        bottom: 0;
                        right: 0;
                        background: rgba(56, 56, 56, 0.3);
                        box-sizing: border-box;
                        .item{
                            display: flex;
                            justify-content: space-between;
                            color: #B9C4C5;
                            font-size: 12px;
                            .per{
                                color:#27C6DA;
                                font-size: 12px;
                            }
                            em{
                                width: 10px;
                                height: 10px;
                                display: inline-block;
                                border-radius: 50%;
                            }
                        }
                    }
                    .li_active{
                        background-color: #000;
                        opacity: 0.6;
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        border: 2px solid #1891ff;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                }
                .fvs_img {
                    width: 640px;
                    height: 360px;
                    text-align: center;
                    line-height: 360px;
                    font-size: 28px;
                }
                li:nth-child(4n){
                    margin-right:0px!important;
                }
            }
        }
    }
    .imgModal{
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 9999;
        background-color: rgba(0,0,0,.3);
        .close{
            position: absolute;
            right: 50px !important;
            top: 30px!important;
            cursor: pointer;
        }
        img{
            width: 65%;
            height: 65%;
        }
    }
}
.active {
    background: var(--themeColor) !important;
    border: var(--themeColor) !important;
    color: #fff !important;
}
#pilcontent_box{
  height: 300px;
  display: flex;
  flex-direction: column;
  i{
      color: red;
      margin-right: 3px;
  }
  span{
      color:var(--themeColor);
      font-weight: 500;
  }
  .top{
    span{
        margin-bottom: 20px;
    }
  }
  .botm{
      margin-top: 40px;
  }
 /deep/ .el-textarea{
     margin-top: 10px;
 }
 /deep/ .el-textarea__inner{
    width: 90%;
    margin-left: 5%;
    height: 80px;
    font-size: 11px;
 }
 .footer{
    border-top: 1px solid #f1ebeb;
    height: 50px;
    line-height: 50px;
    text-align: end;
 }
}
</style>
